<template>
  <div>
    <el-link type="primary" :underline="false" @click="setScore">批量设置分数</el-link>
    <el-dialog title="批量设置分数" :visible.sync="visible" with="60%" :close-on-click-modal="false">
      <el-form :model="form" size="mini">
        <el-form-item label="单选题:"><el-input-number v-model="form.question_type_1" controls-position="right" :min="1" size="mini" :precision="1" /></el-form-item>
        <el-form-item label="判断题:"><el-input-number v-model="form.question_type_2" controls-position="right" :min="1" size="mini" :precision="1" /></el-form-item>
        <el-form-item label="多选题:">
          <el-row type="flex">
            <span>每题</span>
            <div class="input-number-margin"><el-input-number v-model="form.question_type_3" controls-position="right" :min="1" size="mini" :precision="1" /></div>
            <span>分，漏选得</span>
            <div class="input-number-margin"><el-input-number v-model="form.question_type_3_miss" controls-position="right" :min="1" :max="100" size="mini" :precision="0" /></div>
            <span>%</span>
          </el-row>
        </el-form-item>
        <el-form-item label="不定项选择题:">
          <el-row type="flex">
            <span>每题</span>
            <div class="input-number-margin"><el-input-number v-model="form.question_type_4" controls-position="right" :min="1" size="mini" :precision="1" /></div>
            <span>分，漏选得</span>
            <div class="input-number-margin"><el-input-number v-model="form.question_type_4_miss" controls-position="right" :min="1" :max="100" size="mini" :precision="0" /></div>
            <span>%</span>
          </el-row>
        </el-form-item>
        <el-form-item label="填空题:">
          <el-row type="flex">
            <span>每空</span>
            <div class="input-number-margin"><el-input-number v-model="form.question_type_5" controls-position="right" :min="0" size="mini" :precision="1" /></div>
          </el-row>
        </el-form-item>
        <el-form-item label="简答题:"><el-input-number v-model="form.question_type_8" controls-position="right" :min="1" size="mini" :precision="1" /></el-form-item>
      </el-form>
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" @click="choose">确认</el-button>
        <el-button size="small" @click="visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    scores: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      visible: false,
      form: {
        question_type_1: 1,
        question_type_2: 1,
        question_type_3: 1,
        question_type_3_miss: 0,
        question_type_4: 1,
        question_type_4_miss: 0,
        question_type_5: 1,
        question_type_8: 1,
        ...this.scores
      }
    };
  },
  methods: {
    setScore() {
      this.visible = true;
    },
    choose() {
      this.visible = false;
      this.$emit('update:scores', this.form);
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
.input-number-margin {
  margin: 0 4px;
}
</style>
